<template>
  <div class="sxc-element-wrapper" @click="handleClick">
    <component :is="element.elName" class="sxc-element" v-bind="{...element.propsValue, play: this.playing, previewPlay:true}" :commonStyleColor="element.commonStyle.color" />
  </div>
</template>

<script>
import { registerComponents } from '@/plugins/index'
import runAnimation from '@/utils/run-animate'
import { mapState } from 'vuex'
export default {
  name: 'components-template',
  components: {
    ...registerComponents
  },
  computed: {
    ...mapState('programs', ['pageData', 'scenes', 'currSceneUUID']),
  },
  props: {
    element: {
      type: Object,
      require: true
    },
    playing: {
      type: Boolean,
      default: false
    }
  },
  watch:{
    playing(){}
  },
  mounted() {
    // 动画
    let cssText = this.$el.style.cssText
    let animations = this.element.animations || []
    runAnimation(this.$el, animations, false, () => {
      this.$el.style.cssText = cssText
    })
  },
  methods: {
    async handleClick() {
      this.$emit('handleElementClick', this.element.events, this.element)
    }
  }
}
</script>
<style lang="scss">
.sxc-element {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
